<template>
    <div class="city">
        <div class="top">
            <div class="top-search">
                <div class="search">
                    <i class="search_icon icon"></i>
                    <input class="search_input" type="text" placeholder="城市/区域/位置">
                </div>
                <div class="back" @click="backClcik">取消</div>
            </div>
            <div class="tab">
                <template v-for="(value,key,index) in allCity" :key="key">
                    <div class="tab-item" @click="tabClcik(index)">
                        <span class="title">{{ value.title }}</span>
                        <em v-show="currentIndex === index" class="bdr-btm"></em>
                    </div>
                </template>
            </div>
        </div>
        <div class="content">
            <template v-for="(value,key,index) in allCity" :key="index">
                <van-index-bar v-show="index === currentIndex" :index-list="getIndexList(value)">
                    <div class="list">
                        <van-index-anchor index="热门" />
                        <div class="hot-cities">
                            <template v-for="(item,index) in value.hotCities" :key="index">
                                <span class="hot-city-item" @click="cityClcik(item.cityName)">{{ item.cityName }}</span>
                            </template>
                        </div>
                        <template v-for="(item,index) in value.cities">
                            <van-index-anchor :index="item.group" />
                            <template v-for="(iten,indey) in item.cities" :key="indey">
                                <van-cell :title="iten.cityName" @click="cityClcik(iten.cityName)" />
                            </template>
                        </template>
                    </div>
                </van-index-bar>
            </template> 
        </div>
    </div>
</template>

<script setup>
import { useRouter } from "vue-router"
import useCityStore from "@/store/modules/city.js"
import { storeToRefs } from "pinia";
import { computed, ref } from "vue";

const router = useRouter()
function backClcik() {
    router.back()
}

const cityStore = useCityStore()
cityStore.fetchAllCityAction()
const { allCity,currentCity } = storeToRefs(cityStore) 

const currentIndex = ref(0)
function tabClcik(index) {
    currentIndex.value = index
}

function getIndexList(value) {
    const list = value.cities.map(item => item.group)
    list.unshift("#")
    return list
} 

function cityClcik(name) {
    currentCity.value.cityName = name
    router.back()
}

</script>


<style lang='less' scoped>
.city {
    --van-primary-color:
    padding: 8px 10px;
    .top {
        .top-search {
            height: 40px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            .search {
                flex: 1;
                border-radius: 18px;
                background-color: #f4f4f4;
                padding: 8px;
                .search_icon {
                    width: 16px;
                    height: 16px;
                    background-image: url("@/assets/img/home/home-sprite.png");
                    background-position: 100% 48%;
                    background-size: 180px;
                    margin-right: 4px;
                    transform: translateY(3px);
                }
                .search_input {
                    border: 0px;
                    background-color: transparent;
                    &::placeholder {
                        color: #888;
                        font-size: 14px;
                    }
                }
            }
            .back {
                padding-left: 8px;
            }
        }
        .tab {
            margin-top: 4px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            .tab-item {
                flex: 1;
                text-align: center;
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;
                .title {
                    padding: 10px 0;
                }
                .bdr-btm {
                    width: 25%;
                    height: 2px;
                    background-color: var(--primary-color);
                }
            }
        }
    }
    .content {
        .list {
            .hot-cities {
                display: flex;
                flex-wrap: wrap;
                justify-content: space-between;
                margin-right: 22px;
                padding-left: 12px;
                .hot-city-item {
                    width: 21%;
                    border-radius: 16px;
                    padding: 8px 0px;
                    margin: 8px 0;
                    font-size: 14px;
                    text-align: center;
                    background-color: #fff4ec;

                }
            }
        }
    }
}
</style>